<template>
    <div
        class="page"
        @touchstart="onTouchStart"
        @touchmove="onTouchMove"
        @touchend="onTouchEnd"
        @mousedown="onMousedown"
        @mousemove="onMousemove"
        @mouseup="onMouseup"
    >
        <img class="next" src="@/assets/next.png" alt="" />
    </div>
</template>

<script setup lang="ts">
    import { useRouter } from "vue-router";
    const router = useRouter();
    let startY = 0;
    let moveY = 0;
    const onTouchStart = (event: any) => {
        moveY = 0;
        startY = event.touches[0].clientY;
    };
    const onTouchMove = (event: any) => {
        moveY = event.touches[0].clientY;
    };
    const onTouchEnd = () => {
        if (moveY != 0 && moveY + 20 < startY) {
            router.push("/awardsList");
        }
    };
    const onMousedown = (event: any) => {
        moveY = 0;
        startY = event.clientY;
    };
    const onMousemove = (event: any) => {
        moveY = event.clientY;
    };
    const onMouseup = () => {
        if (moveY != 0 && moveY + 20 < startY) {
            router.push("/awardsList");
        }
    };
</script>

<style lang="scss" scoped src="./Index.scss"></style>
